<template>
  <div>
    <div v-if="isGotList" class="singer-all">
      <div class="header">
        <div class="header-img">
          <img :src="singer.artist.cover" alt="">
        </div>
        <div class="header-detail">
          <div class="header-name">{{singer?.artist?.name}}</div>
          <div class="header-fans">粉丝 66.5万</div>
          <div class="header-tags">
            <span v-for="(tag,index) in singer?.artist?.identities" :key="index">{{tag}}</span>
          </div>
        </div>
      </div>
      <div class="title">歌手简介</div>
      <div class="info" :class="isShowAll?'showAll':''">
        {{singer?.artist?.briefDesc||"暂无简介"}}		
      </div>
      <div class="show-all" @click.stop="isShowAll=!isShowAll">完整歌手介绍</div>
      <div class="title">热门单曲</div>
      <div class="playlist-show">
          <ListComponent @addToListenList="$emit('addToListenList',tracks)" :songId="songId" v-for="(listItem,index) in tracks" :key="listItem.id" :listItem="listItem" :index="index+1"/>
        </div>
    </div>
    <WaitLoad v-else/>
  </div>
</template>

<script>
import WaitLoad from "@/components/WaitLoad.vue";
import ListComponent from "@/components/ListComponent.vue";
  export default {
    name:"SingerView",
    components:{
      WaitLoad,
      ListComponent
    },
    props:["songId"],
    data(){
      return {
        isGotList:false,
        singer:null,
        tracks:[],
        isShowAll:false
      }
    },
    async created(){
      console.log(this);
      let result = await this.axios.get(`/artist/detail?id=${this.$route.query.id}`);
      if(result.status==200){
        let {data} = result.data;
        this.singer = data;
        console.log(this.singer);
        this.isGotList = true;
      }
      let resultN = await this.axios.get(`/artist/album?id=${this.$route.query.id}&limit=30`);
      if(resultN.status==200){
        let {hotAlbums} = resultN.data;
        this.tracks = hotAlbums;
        console.log(this.tracks);
      }
    }
  }
</script>

<style lang="scss" scoped>
.singer-all{
  width: 100vw;
  box-sizing: border-box;
  background-color: #fff;
  .header{
    width: 100%;
    height: 3.12rem;
    box-sizing: border-box;
    position: relative;
    .header-img{
      width: 100%;
      height: 100%;
      position: relative;
      &::before{
        position: absolute;
        width: 100%;
        height: 100%;
        content: "";
        left: 0;
        top: 0;
        background-color: rgba($color: #000000, $alpha: 0.2);
      }
    }
    .header-detail{
      position: absolute;
      width: 100%;
      left: 0.1rem;
      bottom: 0.2rem;
      color: #fff;
      >div{
        margin-top: 0.1rem;
      }
      .header-name{
        font-size: 0.2rem;
      }
      .header-fans{
        font-size: 0.13rem;
      }
      .header-tags{
        font-size: 0.12rem;
      }
    }
  }
  .title{
    font-size: 0.18rem;
    font-weight: bold;
    box-sizing: border-box;
    padding: 0.15rem;
    color: #333;
    width: 100%;
  }
  .info{
    width: 100%;
    height: 0.6rem;
    font-size: 0.14rem;
    color: #666;
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    padding: 0 0.15rem;
    box-sizing: border-box;
  }
  .showAll{
    height: 100%;
    display: block;
  }
  .show-all{
    width: 100%;
    margin-top: 0.25rem;
    font-size: 0.14rem;
    color: #666;
    text-align: center;
    margin-bottom: 0.3rem;
  }
}
</style>